<template>
  <div class="home">
    <h3>对轮播图组件进行测试</h3>
    <!--
      这里的style会在组件的根元素上生效
    - list:是图片列表数据，它是一个数组，保存要轮播图片信息
    - auto:2000. 开启自动播放。2000毫秒切换一张.
    - curIdx:初始播放第几张
    -->
    <my-slider style="width:500px;height:350px;"
    :auto="2000"
    :curIdx="curIdx"
    :list="list"
    @click="hClick"
    @slider="hSlider"></my-slider>
  </div>
</template>

<script>

export default {
  name: 'SliderTest',
  data () {
    return {
      curIdx: 1, // 默认显示第二张图
      list: [
        {
          url: require('./img/12色差图.jpg'),
          // url: './img/12色差图.jpg',
          alt: '青海湖'
        },
        {
          url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2050907555,3556134029&fm=173&app=25&f=JPEG?w=640&h=424&s=5E7206C5EC007B472F18C8800300709B',
          alt: '乌镇'
        },
        {
          url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2930385341,2656794424&fm=173&app=25&f=JPEG?w=640&h=427&s=8F521CCD96833B4F743618330300C050',
          alt: '黄山'
        },
        {
          url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2460882167,4287726830&fm=173&app=25&f=JPEG?w=639&h=424&s=9F12548398507EC651374DD00300709E',
          alt: '梅里雪山'
        },
        {
          url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3590873249,2618537390&fm=173&app=25&f=JPEG?w=640&h=426&s=3161E6A0881277C6453849160300C0D6',
          alt: '九寨黄龙'
        }
      ]
    }
  },
  methods: {
    hClick (index) {
      // alert(index)
      console.log('当前是', index, '被点击')
    },
    hSlider (idx) {
      console.log(idx)
    }
  }
}
</script>
